<!--
 * @Author: JiraiyaChen 979526234@qq.com
 * @Date: 2025-07-09 09:15:34
 * @LastEditors: JiraiyaChen 979526234@qq.com
 * @LastEditTime: 2025-08-01 14:06:27
 * @Description: 常用功能 - 模板信息
-->

<template>
  <div>
    <div class="title mb-3">模板信息</div>
    <div class="print-settings-card">
      <div class="print-settings-header">
        <div class="print-settings-left">
          <el-icon class="print-icon"><Printer /></el-icon>
          <span class="print-settings-title">打印设置</span>
        </div>
        <el-button
          :disabled="selectionList.length === 0"
          type="primary"
          size="small"
          class="batch-print-btn"
          @click="handlePrintAll"
        >
          <el-icon class="mr-1"><Document /></el-icon>
          批量打印
        </el-button>
      </div>
      <div class="print-settings-content">
        <el-checkbox-group v-model="printList" class="print-checkbox-group" @change="handlePrintListChange">
          <el-checkbox
            v-for="item in openBidRecordDisplayFields"
            :key="item.key"
            :label="item.key"
            :value="item.key"
            class="print-checkbox-item"
          >
            {{ item.value }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <ClTable
      v-if="loaded"
      class="table-report"
      show-index
      show-selection
      :table-data="tableData"
      show-border
      stripe
      :column-list="COLUMN_LIST"
      :show-page="false"
      :selectable="(row) => !row._RICH_TEXT"
      @handle-selection-change="handleSelectionChange"
    >
      <template #column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button v-if="scope.row._PDF" type="primary" link plain @click="handlePrint(scope.row)">打印</el-button>
            <el-button v-if="scope.row._RICH_TEXT" type="primary" link plain @click="handlePreview(scope.row)">
              预览
            </el-button>
          </template>
        </el-table-column>
      </template>
    </ClTable>
    <RichTextDialog
      v-if="hookVisible"
      v-model="hookVisible"
      :info="dialogInfo"
      :type="type"
      @at-close="onCloseDialog"
    />
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { Document, Printer } from '@element-plus/icons-vue'
import RichTextDialog from './RichTextDialog.vue'
import { API_MAP, COLUMN_LIST, COMPETITIVE_NEGOTIATION, DEFAULT_START, NOTICE } from './data'
import { previewPDFInNewWindow } from '@/utils/pdf-utils'
import {
  commonExport,
  exportScoringDetailsSummaryTemplate,
  getOpenBidRecordDisplayFields,
  updateBidRecordShowField
} from '@/api/scoring-details-summary'
import { useProjectInfoStore } from '@/store/projectInfo'
import { commonLoadEnumValue } from '@/api/common'
onMounted(() => {
  initTableData()
  initPrintList()
  initOpenBidRecordDisplayFields()
})
const { id: projectId, bidType } = useProjectInfoStore().projectInfo

// 开标记录显示字段
const openBidRecordDisplayFields = ref<any[]>([])
const initOpenBidRecordDisplayFields = async () => {
  const res: any = await commonLoadEnumValue({ typeCode: 'BidRecordColumnEnum' })
  openBidRecordDisplayFields.value = res
}
const loaded = ref(false)
const tableData = ref<any[]>([])
const initTableData = () => {
  loaded.value = false
  if (bidType === '竞争性磋商') {
    tableData.value = [...DEFAULT_START, ...COMPETITIVE_NEGOTIATION, ...NOTICE]
  } else {
    tableData.value = [...DEFAULT_START, ...NOTICE]
  }
  loaded.value = true
}
const selectionList = ref<any[]>([])
const handleSelectionChange = (val: any) => {
  selectionList.value = val
}

const handlePrintAll = async () => {
  try {
    const projectId = useProjectInfoStore().projectInfo.id
    const templateList = selectionList.value.map((item: any) => item.name)
    const { fileName, fileStream }: any = await exportScoringDetailsSummaryTemplate({ projectId, templateList })
    previewPDFInNewWindow(fileStream, fileName)
  } catch (error) {
    console.log('🐷 🐽 handlePrintAll 🐽 error👉👉👉', error)
  }
}

const handlePrint = async (row: any) => {
  if (API_MAP[row.name]) {
    const res: any = await commonExport(API_MAP[row.name])
    const { fileName, fileStream } = res
    previewPDFInNewWindow(fileStream, fileName)
    return
  }
  ElMessage.warning('暂无模板')
}
const { type, hookVisible, dialogInfo, onOpenDialog, onCloseDialog } = useDialog(null)
const handlePreview = async (row: any) => {
  if (row._RICH_TEXT) {
    const res: any = await commonExport(API_MAP[row.name])
    onOpenDialog({ htmlContent: res })
  }
}

const printList = ref<any[]>([])
const initPrintList = async () => {
  const resString: any = await getOpenBidRecordDisplayFields({ id: projectId })
  if (resString) {
    printList.value = resString.split(',')
  }
}
const handlePrintListChange = async (val: any) => {
  const bidRecordShowField = val.join(',')
  await updateBidRecordShowField({ bidRecordShowField, id: projectId })
  await initPrintList()
}
</script>

<style lang="scss" scoped>
.title {
  font-weight: 600;
  font-size: 20px;
  color: #242222;
}

.print-settings-card {
  background: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #409eff;
  }
}

.print-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.print-settings-left {
  display: flex;
  align-items: center;
}

.print-icon {
  color: #409eff;
  font-size: 18px;
  margin-right: 8px;
}

.print-settings-title {
  font-weight: 600;
  font-size: 16px;
  color: #303133;
}

.print-settings-content {
  padding: 4px 0;
}

.print-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.print-checkbox-item {
  margin-right: 0 !important;

  :deep(.el-checkbox__label) {
    font-size: 14px;
    color: #606266;
  }

  :deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
    color: #409eff;
    font-weight: 500;
  }

  :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
    background-color: #409eff;
    border-color: #409eff;
  }
}

.batch-print-btn {
  background-color: #409eff;
  border-color: #409eff;
  color: #fff;
  padding: 8px 12px;
  font-size: 14px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;

  &:hover {
    background-color: #66b1ff;
    border-color: #66b1ff;
  }

  &:disabled {
    background-color: #a0cfff;
    border-color: #a0cfff;
    color: #fff;
    cursor: not-allowed;
  }
}
</style>
